<script setup lang="ts">
import { getStatisticsData } from "@/api/home/index"
import { QuestionFilled } from '@element-plus/icons-vue'

const state = reactive({
  loading: false,
  statisticsData: {
    totalIncomeMoney: 0,
    totalOrderNum: 0,
    totalReturnedMoney: 0,
    totalSaleMoney: 0
  } as any
})

onMounted(() => {
  loadStatisticsData()
})
async function loadStatisticsData() {
  try {
    state.loading = true
    const { data } = await getStatisticsData()
    // console.log('data', data)
    state.statisticsData = data
  } catch (error) {
  } finally {
    state.loading = false
  }
}

const blockList = [
  { column: 'totalOrderNum', name: '订单笔数', unit: '笔', content: '订单笔数=(商品消费+快速消费+计次消费)的订单数', startColor: '#00ba26', endColor: '#00ba26a1' },
  { column: 'totalSaleMoney', name: '销售总额', unit: '元', content: '销售总额=商品消费+快速消费+计次消费的合计金额', startColor: '#f52c12', endColor: '#f52c12c7' },
  { column: 'totalReturnedMoney', name: '退款总额', unit: '元', content: '退款总额=退货或撤单的退款总金额', startColor: '#fb9a08', endColor: '#fb9a08db' },
  { column: 'totalIncomeMoney', name: '综合收入', unit: '元', content: '综合收入是指店铺实际进帐金额', startColor: '#2062e6', endColor: '#2062e696' },
]
</script>

<template>
  <div class="home-statistic">
    <div class="home-statistic-title">营业数据统计</div>
    <el-row :gutter="15" v-loading="state.loading">
      <el-col :xs="24" :sm="12" :md="12" :lg="6" v-for="(item, index) in blockList" :key="index">
        <el-card class="home-statistic-card" shadow="hover"
          :style="{ 'background-image': `linear-gradient(to right, ${item.startColor},  ${item.endColor})` }">
          <div class="home-business-title">
            <span>{{ item.name }}</span>
            <el-tooltip :content="item.content" placement="top">
              <el-icon size="16">
                <QuestionFilled />
              </el-icon>
            </el-tooltip>
          </div>
          <div class="item-num">
            <span>{{ state.statisticsData[item.column] }}</span>
            <span class="unit">{{ item.unit }}</span>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped lang="scss">
.home-statistic {
  .home-statistic-title {
    border-left: 2px solid var(--el-color-primary);
    font-size: 18px;
    height: 25px;
    line-height: 25px;
    padding-left: 10px;
    margin: 15px 0;
  }

  .home-statistic-card {
    margin-bottom: 15px;
    padding-left: 9px;
    color: #fff;
    line-height: 30px;
    cursor: pointer;

    .home-business-title {
      display: flex;
      flex-direction: row;
      align-items: center;
    }

    .item-num {
      font-size: 25px;
      font-weight: 500;

      .unit {
        font-size: 13px;
        margin-left: 3px;
      }
    }
  }
}
</style>